<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合练习</title>
</head>
<body>
    <table border="1">
        <caption>个人信息</caption>
        <tr>
            <td>照片:</td>
            <td id="head_td"></td>
        </tr>
        <tr>
            <td>姓名:</td>
            <td id="name_td"></td>
        </tr>
        <tr>
            <td>年龄:</td>
            <td id="age_td"></td>
        </tr>
        <tr>
            <td>好友:</td>
            <td id="friends_td"></td>
        </tr>
    </table>
    <input type="button" value="请求数据" onclick="f()">
    <script>
        // 获取表格
        let table = document.querySelector("table")
        // let tr = document.querySelector("tr")
        function f(){
            let person = {name:"苍老师",url:"http://java.tedu.cn/img/202302/1676884975250.jpg",age:30,
            frends:["貂蝉","西施","杨玉环"]};
        // 把对象中的数据相识到页面,好有通过无序列表显示
        let head_td = document.querySelector("#head_td")
        let name_td = document.querySelector("#name_td")
        let age_td = document.querySelector("#age_td")
        let friends_td = document.querySelector("#friends_td")
        name_td.innerText = person.name
        age_td.innerText = person.age
        // 创建图片标签
        let img =document.createElement("img")
        img.src = person.url
        head_td.append(img)
        // 创建ul和li
        let ul = document.createElement("ul")
        for (let frend of person.frends) {
            let li = document.createElement("li")
            li.innerText = frend
            ul.append(li)
        }
        friends_td.append(ul)
    }
    </script>
</body>
</html>